<template>
 <div>
     <router-link class="header-abs" tag="div" to="/" v-show="showAbs">
          <div class="iconfont back-icon">&#xe624;</div>
     </router-link>
     <div
        :style="opacity"
        class="header-fixed" 
        v-show="!showAbs">
        <router-link to="/">
            <div class="iconfont back-home">&#xe624;</div>
        </router-link>
        景点详情
     </div>
 </div>
</template>
<script>
 export default {
   data () {
     return {
         showAbs:true,
         opacity:{
             opacity:0
         }
     }
   },
   activated(){
       window.addEventListener('scroll',this.handleScroll)
   },
   deactivated() {
       window.removeEventListener('scroll',this.handleScroll)
   },
   methods: {
       handleScroll(){
           const top=document.body.scrollTop
           if(top>60){
               let opacity=top/140
               opacity=opacity>1?1:opacity
               this.opacity={
                   opacity
               }
               this.showAbs=false
           }else{
               this.showAbs=true
           }
       }
       
   },
   components: {
   }
 }
</script>
<style lang="stylus" scoped>
     @import "~styles/varibles.styl"
    .header-fixed
        z-index 2
        text-align center
        height $headerHeight
        line-height $headerHeight
        background $bgColor
        font-size .32rem
        color #fff
        position fixed
        left 0
        top 0
        right 0
        .back-home
            width 0.64rem
            font-size .4rem
            position absolute
            left 0
            top 0
            color #fff
    .header-abs
        position absolute
        top .2rem
        left 0.2rem
        width 0.8rem
        height 0.8rem
        border-radius .4rem
        background rgba(0,0,0,.8)
        line-height .8rem
        text-align center
        .back-icon
            color #fff
            font-size .4rem
</style>

